const { resolve } = require('path')
const path = require('path') //path模块是Node内置的
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
//暴露配置对象
module.exports = {
    //入口
    entry:'./src/main.js',

    //出口
    output:{    
        path:resolve(__dirname,'../build'),//打包文件所在的根目录
        // filename:'js/bundle.js',//打包生成的js文件名(可以带目录)
        filename: 'js/[name]_[contenthash:8].js',// contenthash: 根据打包文件内容来生成hash值
        clean:true,//打包时,会先自动清空打包文件夹
    },

    //模式
    //mode:'production',
    mode:'production',


    module:{
        rules:[
            //配置css文件处理
            {
                test:/\.css$/,//处理css文件
                use:[
                  MiniCssExtractPlugin.loader,
                    // "style-loader", //将css生成style标签插入HTML中
                    "css-loader",
                    'postcss-loader', // 添加在css-loader下面
                ]
            },
            {
                test:/\.less$/,///处理less文件
                use:[
                  MiniCssExtractPlugin.loader,
                    // 'style-loader',//将CSS生成style标签插入HTML中
                    'css-loader',//将CSS转为CommonJS的模块
                    'postcss-loader', // 添加在css-loader下面
                    'less-loader'//将Less编译为CSS
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                              '@babel/preset-env',
                              {
                                useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                corejs: { version: 2 } // 指定core-js的版本号为2
                              }
                            ]
                          ], // 指定bebel预设包
      						plugins: [], // 指定babel插件包
                    }
                }
                
            },
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                  // 指定进行图片base64编码最大文件大小
                  dataUrlCondition: {
                    maxSize: 5 * 1024, // 5kb
                  }
                },
                // 打包生成的文件
                generator: {
                  // [name]: 图片原本的名称
                  // [hash:8]: 图片内容的md5值, 保留前8位
                  // [ext]: 图片的后缀名
                  filename: 'images/[name]_[hash:8][ext]',
                },
             },
                   // 配置 html 的 loader
            {
               test: /\.(html)$/,
               use: {
                 loader: 'html-loader'
               }
             },
              // 打包字体图标
      {
        test: /\.(woff|woff2|ttf)$/,  
        type: 'asset',
        // 解析器
        parser: {
          // 指定进行base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          }
        },
        generator: {
          filename: 'font/[name]_[hash:8][ext]',
        },
      },
             

        ]
    },
    plugins: [
        new ESLintPlugin(),
        // 打包html的插件
        new HtmlWebpackPlugin({
          template: './public/index.html',  // 对指定页面进行打包
          inject: 'body' // 将打包生成的js插入到页面的body最下面
        }),
        // 单独生成css的插件
        new MiniCssExtractPlugin({					
          filename: "css/[name]_[hash:8].css",
        }),
    ],
    // 优化配置
  optimization: {
    minimizer: [
      // 2. 在优化配置中指定插件来压缩CSS
      new CssMinimizerPlugin(),
      // 2. 在优化配置项中指定插件压缩JS
      new TerserPlugin()
    ],
  },
}